<template>
  <div class="fixed">
    <div
      class="app-background flex-1 flex flex-col"
      v-if="['video', 'cdn-video'].includes(comBackground.type)"
    >
      <VideoBackground class="h-[100%]" :src="backgroundSrc"></VideoBackground>
    </div>
    <div v-else-if="imageTypes.includes(comBackground.type)" class="app-background">
      <div class="w-100 h-100 background" :style="style"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getImageByFullPath } from '@/api/utils/image';
import { EVENT_BUS_ENUM, LOCAL_FORAGE_ENUM } from '@/global/enum/common';
import usePageStore from '@/store/page';
import type { BackgroundType } from '@/store/page/types';
import { useEventBus } from '@vueuse/core';
import localforage from 'localforage';
import type { CSSProperties } from 'vue';
import VideoBackground from 'vue-responsive-video-background-player';
import defaultBackground from '../assets/bg.webp';

const pageStore = usePageStore();
const bus = useEventBus(EVENT_BUS_ENUM.UPDATE_BACKGROUND);
const backgroundSrc = ref<string>('');

/* 判断壁纸类型 */
const imageTypes: BackgroundType[] = ['image', 'base64', 'cdn-image'];

const comBackground = computed(() => {
  return pageStore.$state.theme.background;
});

/**
 * @description: 获取本地壁纸
 */
const getLocalBackground = async () => {
  const type = comBackground.value.type;
  let src = comBackground.value.src;
  /* 根据不同类型加载不同资源路径 */
  let resourceMap: Record<BackgroundType, () => any> = {
    image: () => getImageByFullPath(src),
    video: () => getImageByFullPath(src),
    base64: async () => {
      return await localforage.getItem(LOCAL_FORAGE_ENUM.BACKGROUND_SRC);
    },
    'cdn-image': () => src,
    'cdn-video': () => src,
  };
  if (type === 'base64') {
    backgroundSrc.value = (await resourceMap[type]()) || defaultBackground;
    return;
  }
  /* 当src为空时设置默认壁纸 */
  if (!src || !resourceMap[type]) {
    backgroundSrc.value = defaultBackground;
    return;
  }
  backgroundSrc.value = resourceMap[type] && resourceMap[type]();
};
/**
 * @description:
 * 目前壁纸是存在于本地数据库中，没有做双向绑定
 * 用通知的方式更新
 */
bus.on(() => {
  getLocalBackground();
});

onMounted(async () => {
  getLocalBackground();
});
watch(
  comBackground,
  () => {
    getLocalBackground();
  },
  {
    deep: true,
    immediate: true,
  },
);
const style = computed((): CSSProperties => {
  if (imageTypes.includes(comBackground.value.type)) {
    return {
      background: `url('${backgroundSrc.value}')`,
      filter: `
      brightness(${100 - comBackground.value.brightness}%)
      grayscale(${comBackground.value.grayscale}%)`,
    };
  }
  return {};
});
</script>

<style lang="scss" scoped>
.background {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.app-background {
  height: 100vh;
  width: 100vw;
  z-index: 10;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;

  pointer-events: none;
  animation: app-background 0.8s forwards;
  @keyframes app-background {
    0% {
      opacity: 0;
      filter: brightness(0%);
    }
    100% {
      opacity: 1;
      filter: brightness(100%);
    }
  }
}
</style>
